<script setup lang="ts">
defineProps({
  item: {
    type: Object,
    default: [] as Record<string, any>
  },
})
</script>

<template>
  <router-link class="exhibition-item" :to="item.url">
    <div class="img-wrap">
      <div class="img">
        <img :src="item.cover_url" :alt="item.title">
      </div>
    </div>
    <div class="info">
      <div class="title text-main font-m line-1 mb-1">{{ item.title }}</div>
      <!-- <div class="subtitle text-muted font-sm line-1">{{ item.long_title }}</div> -->
      <div class="desc text-muted font line-2">{{ item.introduce }}</div>
      <div class="btn flex-center">
        <div class="icon arrow">
          <svg t="1511314697872" style="" viewBox="0 0 1024 1024" version="1.1" width="32" height="32">
            <path
              d="M347.526 657.92c7.68 7.68 7.68 20.48 0 28.16s-20.48 7.68-28.16 0l-160-160c-7.68-7.68-7.68-20.48 0-28.16l160-160c7.68-7.68 20.48-7.68 28.16 0s7.68 20.48 0 28.16L221.758 491.837h628.479c11.203 0 20.163 8.96 20.163 20.163s-8.96 20.163-20.163 20.163H221.439L347.524 657.92z">
            </path>
          </svg>
        </div>
      </div>
    </div>
  </router-link>
</template>

<style lang="scss" scoped>
.exhibition-item {
  overflow: hidden;
  width: 450px;
  // height: 370px;
  height: 435px;
  margin-bottom: 30px;
  background: #FFFFFF;
  border-radius: 12px;
  cursor: pointer;
  border: 1px solid #9195A3;

  &:not(:nth-child(3n)) {
    margin-right: 45px;
  }

  .img-wrap {
    width: 100%;
    // height: 165px;
    height: 257px;
    border-radius: 12px;
    overflow: hidden;
  }

  .img {
    height: 100%;
    transition: all 0.36s ease;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .info {
    padding: 24px 20px;

    .title {
      transition: all 0.36s ease;
    }

    .desc {
      min-height: 40px;
      margin-top: 15px;
      margin-bottom: 25px;
      line-height: 20px;
    }
  }

  .btn {
    width: 80px;
    height: 30px;
    border-radius: 10px;
    transition: all 0.36s ease;
    border: 1px solid #9195A3;

    path {
      fill: #9195A3;
    }

    .arrow {
      transform: rotate(180deg);
    }
  }

  &:hover {
    border-color: transparent;
    box-shadow: 0px 12px 12px 1px rgba(98, 102, 117, 0.15);

    .img {
      transform: scale(1.08);
    }

    .title {
      background-image: linear-gradient(to right, #252086 0%, #E60012 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .btn {
      margin-left: 10px;
      border-color: #fff;
      background-image: linear-gradient(to right, #3888FF, #6c71FF, #AA58FA, #FB6D86);

      path {
        fill: #fff;
      }
    }
  }
}
</style>
